<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="监测点位：">
        <el-select
          v-model="queryParams.segmentIdArr"
          collapse-tags
          multiple
          placeholder="请选择监测点位"
        >
          <el-option
            v-for="item in dmQueryList"
            :key="item.id"
            :label="item.segmentname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="日期：">
        <el-date-picker
          v-model="queryParams.dataTime"
          type="month"
          placeholder="选择日期"
          format="yyyy-MM"
          value-format="yyyy-MM"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="queryParams.prop" v-show="!pageType">
      <el-tab-pane label="地下水" name="CBF8"></el-tab-pane>
      <el-tab-pane label="地表水" name="CBF1"></el-tab-pane>
    </el-tabs>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="SegmentName"
        label="点位名称"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="SampleDate"
        label="监测日期"
        width="180"
      ></el-table-column>
      <el-table-column
        v-for="item in tableNameData"
        :prop="item.prop"
        :label="item.label"
        :key="item.prop"
        width="80"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  maunalDataManagementsyd,
  getManualMonitorData,
  getDmList,
  bussinessItemData,
  deleteMaunalSegmentsyd,
  deleteManualMonitorData,
  manualMonitordataLastTime,
} from "./api";
export default {
  props: {
    pageType: {
      default: "",
      type: String,
    },
  },
  data() {
    return {
      queryParams: {
        segmentIdArr: [],
        dataTime: "",
        prop: "CBF8",
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      dmQueryList: [],
      yzList: false,
      yzListMap: [],
      tableNameData: [],
      selectIds: [],
    };
  },
  created() {
    if (this.pageType) {
      this.queryParams.prop = "CBN";
    }
    this.getDmListFn();
    this.getList();
  },

  methods: {
    async manualMonitordataLastTime() {
      let res = await manualMonitordataLastTime();
      this.queryParams.dataTime =
        res.data.dataTime || $moment().format("{yyyy}-{mm}-{dd}");
    },
    async getDmListFn() {
      let query = {
        isdrink: "1",
        ismanual: "1",
      };
      if (this.pageType) {
        query.isdrink = "0";
      }
      let res = await getDmList(query);
      this.dmQueryList = res.rows;
      // 默认选中全部监测点位
      if (this.dmQueryList && this.dmQueryList.length > 0) {
        this.queryParams.segmentIdArr = this.dmQueryList.map((item) => item.id);
      }
    },
    async getYzlist() {
      if (this.yzList) {
        return;
      }
      await this.manualMonitordataLastTime();
      let params = { bussinessCategoryCode: this.queryParams.prop };
      let res = await bussinessItemData(params);
      for (let item of res.data) {
        // this.yzListMap[item.itemCode+'_Val'] = item.itemNameUnit || item.itemName;
        this.tableNameData.push({
          prop: item.itemCode + "_Val",
          label: item.itemNameUnit || item.itemName,
        });
      }
      this.yzList = true;
    },
    async getList() {
      await this.getYzlist();
      let params = { ...this.queryParams };
      params.segmentId = params.segmentIdArr.join(",");
      delete params.segmentIdArr;
      // delete params.prop;
      let apiFn = this.pageType
        ? getManualMonitorData
        : maunalDataManagementsyd;
      let res = await apiFn(params);
      // if(!this.tableNameData.length && res.rows.length > 0){
      //   let fisrt = res.rows[0];
      //   for(let key in fisrt){
      //     if(this.yzListMap[key]){
      //       this.tableNameData.push({prop:key,label:this.yzListMap[key]})
      //     }
      //   }
      // }
      this.tableData = res.rows;
    },
    handleQuery() {
      this.getList();
    },
    handleSelectionChange(val) {
      this.selectIds = val.map((item) => item.ReportID);
      console.log("handleSelectionChange", this.selectIds);
    },
    async handleBatchDelete() {
      if (!this.selectIds) {
        this.$message.warning("请选择要删除的记录");
        return;
      }
      let res = await this.$confirm(
        `确定要删除选中的 ${this.selectIds.length} 条数据吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          return true;
        })
        .catch(() => {
          return false;
        });
      if (!res) {
        return;
      }
      let params = {
        reportId: this.selectIds.join(","),
        segmentId: this.queryParams.segmentIdArr.join(","),
        bussinessCategoryCode: this.queryParams.prop,
        sampleDate: this.queryParams.dataTime,
      };
      let apiFn = this.pageType
        ? deleteManualMonitorData
        : deleteMaunalSegmentsyd;
      await apiFn(params);
      this.getList();
    },
  },
};
</script>
